<template>
  <div class="login-container">
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/liebiao')"
      class="header"
    />
    <div>
      <van-cell>
        <div slot="title">文章标题</div>
        <div slot="label">
          <span>时间：0000-00-00</span>
          &nbsp;
          <span>分类：时政</span>
          &nbsp;
          <span>阅读(1111)</span>
        </div>
      </van-cell>
      <div style="font-size: 12px">
        文章内容文章内容文章内容文章内容文章内容文章内容
      </div>
      <div>
        <p>相关推荐</p>
        <van-grid :column-num="2">
          <van-grid-item v-for="value in 4" :key="value" icon="photo-o">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            <span>产品描述</span>
          </van-grid-item>
        </van-grid>
      </div>
      <van-tabbar route>
        <van-tabbar-item icon="like-o">收藏</van-tabbar-item>
        <van-tabbar-item icon="thumb-circle-o">点赞</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "XiangQingIndex",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.login-container {
  padding-bottom: 100px;
  .header {
    background-color: rgb(81, 158, 247);
  }
  /deep/ .van-nav-bar__title {
    color: #fff !important;
  }
  /deep/ .van-nav-bar__left span {
    color: #fff !important;
  }
  /deep/ .van-nav-bar .van-icon {
    color: #fff !important;
  }
}
</style>
